<template>
  <div class="next-play">
    <div v-if="isShow" style="margin-bottom: 15px">
      <p class="rec-title">
        接下来播放
        <span class="next-button">
        <span class="txt">自动连播</span>
        <span class="switch-button on">
          <el-switch v-model="switchValue" size="small"/>
        </span>
      </span>
      </p>
      <!--下一个视频-->
      <videoPageCard  :id="item.id" :title="item.title" :img="item.img" :up="item.up" :nickname="item.nickname"
                     :viewsChange="item.views" :commentCount="item.commentCount">
      </videoPageCard>
    </div>
  </div>
</template>

<script>
import videoPageCard from "@/components/videoCard/videoPageCard";

export default {
  /*下一个视频组件*/
  name: "upRecommendVideoBox",
  components: {
    videoPageCard
  },
  data() {
    return {
      switchValue: '',
      // 临时数据
      item: {
        id: 1,
        title: '那些特别刻苦的同学，考试往往考不过，为什么？',
        up: '小擦拭时',
        img: '',
        nickname: '小擦拭时',
        views: 25323,
        commentCount: 542,

      },
      isShow:true,
    }
  },
  inject:[
    "detailList"
  ],
  created() {
    this.getUserNextVideo()
  },
  methods: {
    async getUserNextVideo() {
      let res = await this.$util.get("hilihili/video/getUserNextVideo", {videoId: this.$route.params.id})
      console.log(res.data)
      if (res.code != 200) {
        return
      }
      if(res.data === null){
        this.isShow =false
      }
      this.item = res.data
      if (this.item === undefined || this.item === null){
        this.isShow =false
        return
      }
      if (this.item.id == this.$route.params.id){
        this.isShow =false
      }
    }
  },
}
</script>

<style scoped>
.next-play {
  border-bottom: 1px solid #F1F2F3;
  margin-bottom: 15px;
}

.rec-title {
  font-size: 14px;
  font-weight: 500;
  color: #18191C;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  line-height: 20px;
}

.txt {
  color: #9499A0;
  font-size: 14px;
  line-height: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
</style>
